<template>
  <div>
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-left">
        <h2>提现审核</h2>
        <div class="description">共 {{ total }} 条记录</div>
      </div>
    </div>

    <!-- 搜索区域 -->
		<div class="search_box">
			<el-form ref="searchFormRef" :model="queryInfo" label-width="120px" class="search-box">
				<el-row :gutter="24">
					<el-col :span="6">
						<el-form-item prop="user_name" label="申请人:">
							<el-input size="large" v-model.trim="queryInfo.user_name" placeholder="搜索申请人"
								:prefix-icon="Search" @change="searchTable"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item prop="dates" label="日期范围:">
							<el-date-picker v-model="queryInfo.dates" type="daterange" size="large"
								start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"
								@change="changeDate" />
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item prop="status" label="订单状态:">
							<Select
                width="240"
                placeholder="请选择订单状态"
                v-model="queryInfo.status"
                :data="payStatusData"
								@change="searchTable"
              />
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<div class="flex justify-end align-center">
							<el-button type="info" :icon="RefreshRight" size="large" @click="resetTable">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

    <!-- 表格区域 -->
    <div class="margin-top">
      <el-table
        ref="multipleTableRef"
        :data="listData"
        style="width: 100%"
      >
      <el-table-column label="申请ID" property="order_on" width="140"></el-table-column>

      <el-table-column label="申请时间" property="create_time"></el-table-column>

      <el-table-column label="申请人" property="user_name"></el-table-column>

      <el-table-column label="提现金额" property="pay_money"></el-table-column>

      <el-table-column label="收款方式" property="pay_type">
        <template #default="scope">
          <template v-for="item in payType">
            <div v-if="scope.row.status === item.value">{{ item.label }}</div>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="收款账号" property="address"></el-table-column>

      <el-table-column property="status" label="状态">
        <template #default="scope">
          <template v-for="item in payStatusData">
            <el-tag
              style="border: none"
              class="ml-2"
              :key="item.id"
              :color="item.color"
              effect="dark"
              v-if="scope.row.status === item.value"
              >
              {{ item.label }}
            </el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="400">
        <template #default="scope">
          <div class="flex align-center">
            <el-button
              class="margin-left-xs"
              size="small"
              plain
              type="default"
              @click="openDetailModal(scope.row)"
              >查看详情</el-button
            >

            <el-button
              class="margin-left-xs"
              size="small"
              type="success"
              plain
              @click="handleChangeAuditStatus(scope.row, 5)"
              >通过</el-button
            >

            <el-button
              class="margin-left-xs"
              size="small"
              type="danger"
              plain
              @click="handleChangeAuditStatus(scope.row, 6)"
              >拒绝</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="margin-top">
      <Pagination
        :total="total"
        @change="changePage"
      />
    </div>

    <!-- 提现详情模态框 -->
    <WithdrawalDetailModal
      v-if="detailModalVisible"
      v-model:visible="detailModalVisible"
      :withdrawal="selectedWithdrawal"
      :userType="userTypes"
      :payType="payType"
      :payStatusData="payStatusData"
      @cancel="closeDetailModal"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, toRef, onMounted, watch } from 'vue'
import Select from '@/components/admin/Select.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router';
import useTableHook from '@/hooks/useTableHook'
import { GetPayAndEditApi, SetPayStatusApi } from '@/api/index'
import { RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/admin/Pagination.vue'
import WithdrawalDetailModal from '@/components/admin/finance/WithdrawalDetailModal.vue';


const router = useRouter();

const payType = [
  {
    label: 'U支付',
    value: 0
  }
]

const userTypes = [
  {
    label: '全部',
    value: ''
  },
  {
    label: '区域代理',
    value: 1,
  },
  {
    label: '店铺',
    value: 2,
  },
  {
    label: '经销商',
    value: 3,
  },
  {
    label: '普通用户',
    value: 0
  },
]

const userStatus = [
  {
    label: '冻结',
    value: 0,
    type: 'error'
  },
  {
    label: '正常',
    value: 1,
    type: 'success'
  }
]

const payStatusData = [
  {
    label: '全部状态',
    value: ''
  },
  {
    label: '发起提款',
    value: 0,
    color: '#f4f4f5'
  },
  {
    label: '区域代理同意',
    value: 1,
    color: '#409eff',
    type: ''
  },
  {
    label: '等待最后确认',
    value: 4,
    color: '#e6a23c'
  },
  {
    label: '通过',
    value: 5,
    color: '#67c23a'
  },
  {
    label: '驳回',
    value: 6,
    color: '#f56c6c'
  },
]

const handleChangeAuditStatus = (record, status) => {
  let showText = ''

  if(status == 5) {
    showText = '通过'
  }

  if(status == 6) {
    showText = '拒绝'
  }

  ElMessageBox.confirm (`确认${showText}申请ID: ${record.order_on}`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    try {
        let params = {
          id: record.id,
          status,
          field: 'status'
        }

        const res = await SetPayStatusApi(params)

        ElMessage({
          type: 'success',
          message: `${showText}成功!`
        })

        searchTable()
      } catch(err) {
        ElMessage({
          type: 'error',
          message: `${showText}失败!`,
        })
      }
  })
}

const selectedWithdrawal = ref<any>(null);
  const detailModalVisible = ref(false);

// 打开详情模态框
const openDetailModal = (item: any) => {
  selectedWithdrawal.value = { ...item };
  detailModalVisible.value = true;
};

// 关闭详情模态框
const closeDetailModal = () => {
  detailModalVisible.value = false;
  selectedWithdrawal.value = null;
};


const changeDate = (record) => {
  queryInfo.value.start_time = queryInfo.value.dates[0]
  queryInfo.value.end_time = queryInfo.value.dates[1]
  searchTable()
}

const queryInfo = ref({
  page: 1,
  limit: 10,
  user_name: '',
  start_time: '',
  end_time: '',
  status: ''
})

const searchFormRef = ref()

// 重置表格
const resetTable = () => {
		searchFormRef.value.resetFields()

		queryInfo.value.start_time = ''

		queryInfo.value.end_time = ''

		searchTable()
	}

onMounted(() => {
  initTable()
})

const {
  total,
  listData,
  searchTable,
  initTable,
  changePage,
} = useTableHook(queryInfo.value, GetPayAndEditApi, {
  resType: 2
})
</script>

<style lang="scss">
$primary: #3498db;

/* 头部区域样式 *//* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: white;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  position: relative;
}

.page-header h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background-color: $primary;
  border-radius: 3px;
}

.btn-create {
  background-color: $primary;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-create:hover {
  background-color: darken($primary, 10%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

.btn-create::before {
  content: '+';
  font-size: 18px;
  font-weight: 500;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-name {
  color: #e74c3c;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
  text-decoration: none;
  transition: color 0.3s;
  margin-top: 5px;
}

.back-link:hover {
  color: #e74c3c;
}

.back-link i {
  margin-right: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #c0392b;
}

.btn-primary i {
  margin-right: 5px;
}
</style>
